<template>
	<view class="activity-card">
		<view class="activity-image">
			<up-image
				src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=beautiful%20west%20lake%20cycling%20route%20landscape%20scenic%20view&image_size=landscape_16_9"
				width="100%" height="160px" radius="12px "></up-image>

		</view>

		<view class="activity-info">
			<view class="activity-title">西湖环湖骑行</view>
			<view class="activity-meta">
				<view class="meta-item">
					<view class="iconfont font-sm">&#xe602;</view>
					<view>2025-08-16 周日</view>
				</view>
				<view class="meta-item">
					<view class="iconfont font-sm">&#xe612;</view>
					<view>杭州市星空牧场</view>
				</view>
				<view class="meta-item">
					<view class="iconfont font-sm">&#xe626;</view>
					<view>32 / 50</view>
				</view>
			</view>
			<view class="activity-leader">
				<up-image
					src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=middle%20aged%20man%20cycling%20guide%20avatar%20portrait&image_size=square"
					width="24px" height="24px" shape="circle"></up-image>
				<view class="leader-name">西湖领队</view>
				<view class="activity-price">
					<view class="free">免费</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	.activity-card {
		min-width: 280px;
		background: white;
		border-radius: 12px;
		overflow: hidden;
		border: 1px solid #e1e5e9;
		cursor: pointer;
		transition: all 0.2s;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		margin-right: 16px;

		.activity-image {
			position: relative;
			height: 160px;
			overflow: hidden;
		}

		.activity-info {
			padding: 16px;

			.activity-title {
				font-size: 15px;
				font-weight: 600;
				color: #333;
				margin-bottom: 12px;
				line-height: 1.3;
			}

			.activity-meta {
				display: flex;
				flex-direction: column;
				gap: 8px;
				margin-bottom: 16px;

				.meta-item {
					display: flex;
					align-items: center;
					gap: 8px;
					font-size: 12px;
					color: #666;
				}
			}
		}

		.activity-leader {
			display: flex;
			align-items: center;
			gap: 12px;

			.leader-name {
				flex: 1;
				font-size: 10px;
				color: #666;
			}

			.activity-price {
				font-size: 12px;
				font-weight: 600;
				color: #667eea;

				.free {
					color: #28a745;
				}
			}
		}
	}
</style>